<script setup lang="ts">
</script>

<template>
  <v-app class="bfz-app">
    <v-app-bar height="72">
      <template #prepend>
        <div class="bfz-bar-prepend">
          <div class="bfz-bar-prepend__inner">
            <font-awesome-icon icon="fa-hammer" class="bfz-bar-prepend__icon"/>
            <div class="bfz-bar-prepend__title">BuildFromZero</div>
          </div>
        </div>
      </template>
    </v-app-bar>
    <router-view class="bfz-main"></router-view>
  </v-app>
</template>

<style scoped lang="scss">
.bfz-bar-prepend {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1vw;
  font-size: 1.8rem;

  &__inner {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    cursor: pointer;
  }

  &__title {
    font-family: 'Minecraft', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  &__icon {
    font-size: 2rem;
  }
}

.bfz-app {
  width: 100vw;
}

.bfz-main {
  padding-top: 72px;
}
</style>
